<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="shortcut icon" href="#">
    


    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .login {
            width: 686px;
            height: 310px;
            padding: 20px;
            margin: 0 auto;
        }

        .login .swiper {
            width: 360px;
            height: 310px;
            overflow: hidden;
            float: left;
        }

        .login .loginCon {
            text-align: center;
            position: relative;
        }

        .login .loginCon .title {
            color: rgb(138, 133, 133);
            font-size: 15px;
        }

        .oauth-buttons {
            margin-top: 10px;
        }

        .login .oauth-buttons.small a {
            width: 48px;
            height: 48px;
        }

        .login .oauth-buttons a {
            display: inline-block;
            width: 64px;
            height: 64px;
            margin-right: 5px;
        }

        .login .loginCon .oauth-buttons a:nth-of-type(1) {
            background: url(https://huaban.com/img/login_icons_tiny.svg);
        }

        .login .loginCon .oauth-buttons a:nth-of-type(2) {
            background: url(https://huaban.com/img/login_icons_tiny.svg) -80px 0;
        }

        .login .loginCon .oauth-buttons a:nth-of-type(3) {
            background: url(https://huaban.com/img/login_icons_tiny.svg) -160px 0;
        }

        .login .loginCon .oauth-buttons a:nth-of-type(4) {
            background: url(https://huaban.com/img/login_icons_tiny.svg) -240px 0;
        }

        .login .loginCon .oauth-buttons a:nth-of-type(5) {
            background: url(https://huaban.com/img/login_icons_tiny.svg) -320px 0;
        }

        .mail-login .with-line {
            margin: 5px 0 10px 0;
            color: rgb(131, 131, 131);
        }

        input {
            width: 264px;
            height: 36px;
            padding: 0 10px;
            outline: 0;
            border: none;
            border: 1px solid #ddd;
            margin-bottom: 10px;
        }

        a {
            text-decoration: none;
            color: #fff;
        }

        .btn .text {
            display: block;
            width: 284px;
            height: 36px;
            line-height: 36px;
            border: 1px solid rgb(238, 73, 73);
            background-color: rgb(238, 73, 73);
            margin-left: 380px;
        }

        .mail-login {
            position: relative;
        }

        .goto-reset-password {
            position: absolute;
            bottom: -55px;
            left: 380px;
            color: rgb(219, 71, 71);
            font-size: 14px;
        }

        .goto-sign-up {
            position: absolute;
            bottom: -55px;
            left: 490px;
            font-size: 14px;
            color: rgb(87, 87, 87);
        }

        .red-link {
            color: rgb(219, 92, 92);
        }
    </style>
</head>

<body>
    <div class="login">
        <!-- 轮播图 -->
        <div class="swiper">
            <div class="swiper-wrapper">
                <!-- <div class="swiper-slide">
                    <img src="https://image.baidu.com/search/detail?ct=503316480&z=0&ipn=d&word=%E5%AE%9D%E5%AE%9D.jpg" alt="">
                </div>
                <div class="swiper-slide">
                    <img src="https://js.588ku.com/comp/base/images/lz.gif" alt="">
                </div>
                <div class="swiper-slide">
                    <img src="	https://js.588ku.com/comp/base/images/lz.gif" alt="">
                </div>
                <div class="swiper-slide">
                    <img src="	https://js.588ku.com/comp/base/images/lz.gif" alt="">
                </div>
                <div class="swiper-slide">
                    <img src="https://huaban.com/img/login/slide_img_05.jpg" alt="">
                </div> -->
            </div>
        </div>
        <div class="loginCon">
            <!-- 第三方账号登录 -->
            <div class="title">用第三方帐号登录</div>
            <div class="oauth-buttons small">
                <a class="weibo" href="#" title="微博帐号登录" rel="nofollow"></a>

                <a class="qzone" href="#" title="QQ帐号登录" rel="nofollow"></a>

                <a class="wechat" href="#" title="微信帐号登录" rel="nofollow"></a>

                <a class="douban" href="#" title="豆瓣帐号登录" rel="nofollow"></a>

                <a class="renren" href="#" title="人人帐号登录" rel="nofollow"></a>
            </div>
            <!-- 手机、密码登录 -->
            <div class="mail-login">
                <div class="with-line">登录</div>
                <form class="mail-login">

                    <input class="clear-input tel" type="text" name="tel" placeholder="输入手机号或邮箱">

                    <input class="clear-input pass" name="password" type="password" placeholder="密码">

                    <a class="go btn btn18 rbtn" href="#" onclick="return false;">
                        <span class="text">登录</span>
                    </a>

                </form>

                <a class="goto-reset-password red-link">忘记密码»</a>
            </div>

            <div class="reset-password" style="display: none">
                <div class="with-line">找回密码</div>
                <form><input class="clear-input" type="text" name="tel" placeholder="输入手机号或邮箱">
                    <a class="go btn btn18 rbtn" href="#" onclick="return false;">
                        <span class="text">重置</span>
                    </a>
                </form>
                <a class="goto-mail-login red-link">又想起来了»</a>
            </div>
            <div class="goto-sign-up">还没有帐号？<a class="red-link" href="zhuce.html">点击注册»</a></div>
        </div>
    </div>

    <script>
        let form = document.querySelector('form');
        let tel = document.querySelector('.tel');
        let pass = document.querySelector('.pass');
        let btn = document.querySelector('.btn');


        // var CookieHandle = {
        //     getCookie: function (cookieName) {
        //         if (document.cookie.length > 0) {
        //             var c_start = document.cookie.indexOf(cookieName + "=");
        //             if (c_start !== -1) {
        //                 c_start = c_start + cookieName.length + 1;
        //                 var c_end = document.cookie.indexOf(";", c_start);
        //                 if (c_end === -1) c_end = document.cookie.length;
        //                 return decodeURIComponent(document.cookie.substring(c_start, c_end));
        //             }
        //         }
        //         return "";
        //     },
        //     setCookie: function (cookieName, value, expiredays) {
        //         var exdate = new Date();
        //         exdate.setDate(exdate.getDate() + expiredays);
        //         var expire_cookie = cookieName + "=" + decodeURI(value) + ";expires=" + exdate.toUTCString();
        //         document.cookie = expire_cookie;
        //     }
        // };



        btn.onclick = function () {
            let phone = tel.value;
            let password = pass.value;
            console.log(phone);
            console.log(password);

            let xhr = new XMLHttpRequest();
            xhr.open('get', `http://localhost:9090/zlogin?userphone=${phone}&password=${password}`);
            xhr.send();
            xhr.onload = function () {
                let res = JSON.parse(xhr.responseText);


                if (res.code) {
                    alert('登录成功');
                    // window.close();
                    // document.cookie = "key=value;expires=时间;"
                    // document.cookie = "login=老谢;expires=" + date;

                    //  储存用户名和密码
                    // CookieHandle.setCookie('username',tel.value);
                    // CookieHandle.setCookie('password',pass.value);


                    // sessionStorage.setItem("key", "value");
                    // sessionStorage.setItem("username", tel.value);
                    // sessionStorage.setItem("password",pass.value);

                    // localstorage.setItem('key','value')
                    localStorage.setItem('username',phone)
                    localStorage.setItem('password',pass.value)



                    // document.cookie="password=pass.value"

                    location.href = "http://127.0.0.1:5500/hqx/index.html"
                    return
                }
                alert(res.msg)



            }
        }

        var mySwiper = new Swiper('.swiper', {
            effect: 'fade',
            autoplay: {
                delay: 10,
                stopOnLastSlide: false,
                disableOnInteraction: true,
            },
        });
    </script>
</body>

</html>